<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{taskList.length}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:what==='全部'}" href="javascript:;" @click="getList" >全部</a>
      </li>
      <li>
        <a :class="{selected :what==='未完成'}" href="javascript:;" @click="getList">未完成</a>
      </li>
      <li>
        <a :class="{selected:what==='已完成'}" href="javascript:;" @click="getList">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearTask" >清除已完成</button>
  </footer>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      what: '全部'
    }
  },
  computed: {
    ...mapState('todo', ['taskList'])
  },
  methods: {
    ...mapMutations('todo', ['clearTask', 'updateIsWhat']),
    getList (e) {
      this.what = e.target.innerHTML
      this.updateIsWhat(e.target.innerHTML)
    }
  }
}
</script>
